<!--环形图-->
<template>
    <div class="main_content" id="chart">
        <div id="bedroom"></div>
    </div>
</template>
<script>
    import echarts from 'echarts';
    import test from './test.json';
    import tt from  './tt.json';
    import $ from 'jquery';
    import $axios from 'axios'
    export default {
        data() {
            return {
                chart: null,
                opinion: ['北京', '南京','武汉','上海','深圳','杭州','广州']/*[{}]*/,
                /*opinionData: [
                    {value:26, name:'学习氛围差'},
                    {value:31, name:'学习氛围一般'},
                    {value:8, name:'学习氛围很好'}
                ]*/
                opinionData: [{}]
            }
        },

        methods: {
            getData() {
                var arr = [{}];
                $.ajax({
                    type: "post",
                    async: false,
                    beforeSend: function () {
                        $('#warning').text('正在处理，请稍等！');
                    },
                    cache: true,
                    url: BASE_URL+'li',
                    data: {},
                    dataType: "json",
                    success: function (result) {
                        arr = result;
                    },
                    error: function (errorMsg) {
                        alert("没有数据");

                    }
                })
                this.opinionData = arr;
                return this.opinionData;
                /*let url2 = 'http://localhost:8080/GetDifCity';

                $axios.get(url2).then(function (data) {
                    this.opinion=data.data
                    console.log(data.data)
                })*/
            },
            drawPie (id) {
                this.chart = echarts.init(document.getElementById(id))
                this.chart.setOption({
                    title: {
                        text: '城市职况分布',
                        left: 'center',
                        top: 10,
                        textStyle: {
                            fontSize: 24,
                            fontFamily: 'Helvetica',
                            fontWeight: 700
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatte: "{b}: {c} ({d}%)"
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            dataView: {}
                        },
                        right: 15,
                        top: 10
                    },
                    legend: {
                        orient: 'vertical',
                        left: 5,
                        top: 10,
                        data: this.opinion/*(function () {
                            var arr=[];
                            $.ajax({
                                type: 'post',
                                async: false,
                                url: 'http://localhost:8080/GetDifCity',
                                data: {},
                                dataType: "json",
                                success: function (result) {
                                    arr = result;
                                },
                                error: function (errorMsg) {
                                    alert("没有数据");

                                }
                            });
                            return arr;
                        })()*/,
                    },
                    dataLoading: false,
                    series: [
                        {
                            name: '职况分布',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center: ['50%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '24',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: this.getData()/*(function () {*/
                                /*var arr = [{}];
                                $.ajax({
                                    type: "post",
                                    async: false,
                                    beforeSend: function () {
                                        $('#warning').text('正在处理，请稍等！');
                                    },
                                    cache: true,
                                    url: 'http://localhost:8080/li',
                                    data: {},
                                    dataType: "json",
                                    success: function (result) {
                                        arr = result;
                                    },
                                    error: function (errorMsg) {
                                        alert("没有数据");

                                    }
                                })*/

                                /*let url = 'localhost:8080/li';*/
                                /*let arr = [{}];*/
                                /*this.$http.get(url).then(function(response){
                                 arr = response.body;
                                 /!*console.log(response.body);*!/
                                 })*/
                                /*this.arr = getData();
                                return arr;*/
                            /*})()*/,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffset: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            }
        },
        mounted() {
            this.$nextTick(function() {
                this.drawPie('bedroom')
            })
        }
    }
</script>
<style scoped>
    #bedroom {
        position: relative;
        left: 50%;
        margin-left: -500px;
        margin-bottom: 70px;
        width: 1000px;
        height: 800px;
        border: solid #D01257 1px;
        box-shadow: 0 0 8px #FB90B7;
        border-radius: 10px;
    }
</style>
